<template>
	<div class="system-config-container layout-pd">
		<el-card shadow="hover">
			<div class="system-config-search mb15">
				<el-row :gutter="20">
					<el-col :span="24" v-auths="['system:config:query']">
						<el-input size="default" placeholder="请输入参数名称" class="mt10" v-model="state.param.configName" clearable
							@keyup.enter.native="getTableData" />
						<el-select v-model="state.param.configType" placeholder="系统内置" clearable size="default" @change="getTableData"
							class="mt10">
							<el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
						<el-button size="default" type="primary" class="mt10" @click="getTableData">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" class="mt10" type="info" @click="resetParamData()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
					</el-col>
					<el-col :span="24" v-auths="['system:config:add', 'system:config:remove', 'system:config:export']">
						<el-button size="default" type="success" class="mt10" @click="onOpenAddConfig('add')"
							:icon="'ele-Plus'" v-auth="'system:config:add'">
							添加
						</el-button>
						<el-button size="default" class="mt10" type="danger" plain @click="handleRefreshCache"
							:icon="'ele-Refresh'" v-auth="'system:config:remove'">
							刷新缓存
						</el-button>
						<el-button size="default" class="mt10" type="warning" plain v-auth="'system:config:export'"
							:icon="'ele-Upload'" @click="handleExport">
							导出
						</el-button>
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="configId" label="参数编号" width="95" show-overflow-tooltip></el-table-column>
				<el-table-column prop="configName" label="参数名称" width="95" show-overflow-tooltip></el-table-column>
				<el-table-column prop="configKey" label="参数键名" show-overflow-tooltip></el-table-column>
				<el-table-column prop="configValue" label="参数值" show-overflow-tooltip></el-table-column>
				<el-table-column prop="configType" label="系统内置" show-overflow-tooltip width="95">
					<template #default="scope">
						<dict-tag :options="sys_yes_no" :value="scope.row.configType" />
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createBy" label="创建人" show-overflow-tooltip></el-table-column>
				<el-table-column label="创建时间" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.createTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140" fixed="right"
					v-auths="['system:config:edit', 'system:config:remove']">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditConfig('edit', scope.row)"
							v-auth="'system:config:edit'">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)"
							v-auth="'system:config:remove'">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<ConfigDialog ref="configDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemConfig">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useConfig } from '/@/api/system/config';
import { download } from '/@/utils/tool';
import { useDict } from '/@/utils/dict';

const { sys_yes_no } = useDict("sys_yes_no");
// 引入组件
const ConfigDialog = defineAsyncComponent(() => import('/@/views/system/config/dialog.vue'));

// 定义变量内容
const configDialogRef = ref();
const state = reactive<TableType>({
	tableData: {
		// 表格树数据
		data: [],
		// 参数树选项
		configOptions: [],
	},
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
		configName: '',
		status: '',
	},
});

/**
 * 初始化表格数据
 * @returns
 */
const getTableData = async () => {
	state.tableData.loading = true;
	try {
		const res = await useConfig().listConfig(state.param);
		state.tableData.data = res.rows;
		state.total = res.total;
	} catch (error) {
		Promise.reject(error);
	}
	state.tableData.loading = false;
};

/**
 * 打开新增参数弹窗
 * @param type
 * @param data 参数树数据
 */
const onOpenAddConfig = (type: string) => {
	configDialogRef.value.openDialog(type);
};
/**
 * 打开编辑参数弹窗
 * @param type
 * @param row 当前行数据
 */
const onOpenEditConfig = (type: string, row: RowConfigType) => {
	configDialogRef.value.openDialog(type, row);
};

/** 导出按钮操作 */
const handleExport = () => {
	download('system/config/export', {
		...state.param,
	}, `config_${new Date().getTime()}.xlsx`)
};
/** 刷新缓存按钮操作 */
const handleRefreshCache = () => {
	useConfig().refreshCache().then((res) => {
		if (res.code === 200) {
			ElMessage.success('刷新缓存成功');
		} else {
			ElMessage.error(res.msg);
		}
	});
}

/**
 * 删除参数
 * @param row 当前行数据
 */
const onTabelRowDel = async (row: RowConfigType) => {
	try {
		const confirmResult = await ElMessageBox.confirm(`此操作将永久删除参数：${row.configName}, 是否继续?`, '提示', {
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
		});
		if (confirmResult === 'confirm') {
			const response = await useConfig().delConfig(row.configId);
			ElMessage.success(response.msg);
			getTableData();
		} else {
			ElMessage.info('已取消删除');
		}
	} catch (error) {
		Promise.reject(error);
	}
};



/**
 * 重置查询参数
 */
const resetParamData = () => {
	state.param = {
		pageNum: 1,
		pageSize: 10,
		configName: '',
		status: '',
	};
	getTableData();
};



// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style lang="scss" scoped>
.mt10 {
	max-width: 140px;
	margin: 10px 0 10px 10px;
}
</style>